<template>
	<view class="detail-modal" v-if="visible">
		<view class="detail-content">
			<view class="neiRong">
				<!-- 头部 -->
				<view class="header">
					<view class="avatar">
						<image :src="order.user?.avatar_text || order.userAvatar" mode="aspectFit">
						</image>
					</view>
					<text class="title">{{order.user?.nickname || order.userName}}</text>
					<text class="time">{{order.createtime_text || order.time}}</text>
					<view v-if="order.state == 0" class="status">
						<text>待支付</text>
					</view>
					<view v-else-if="order.state == 1" class="status">
						<text>待帮助</text>
					</view>
					<view v-else-if="order.state == 2" class="status2">
						<text>进行中</text>
					</view>
					<view v-else-if="order.state == 3" class="status3">
						<text>已完成</text>
					</view>
				</view>

				<!-- 快递详情 -->
				<view class="card">
					<view class="card-content">
						<view class="row">
							<text class="label">标题：</text>
							<text class="value">{{order.name || order.title}}</text>
						</view>
						<view class="row">
							<text class="label">服务类型：</text>
							<text class="value">{{order.type || '未知类型'}}</text>
						</view>
						<view class="row">
							<text class="label">物品数量：</text>
							<text class="value">{{order.num || '0'}}个</text>
						</view>
						<view class="row">
							<text class="label">接单人限制：</text>
							<text class="value">{{order.genderRestriction || '不限'}}</text>
						</view>
						<view class="row" v-if="order.price">
							<text class="label">金额：</text>
							<text class="value">{{order.price}}</text>
						</view>
						<view class="row" v-if="order.addprice">
							<text class="label">追加金额：</text>
							<text class="value">{{order.addprice}}</text>
						</view>
						<view class="row" v-if="order.endprice">
							<text class="label">实付金额：</text>
							<text class="value">{{order.endprice}}</text>
						</view>
						<view class="row" v-if="order.kdsj">
							<text class="label">商家名称：</text>
							<text class="value">{{order.kdsj}}</text>
						</view>
						<view class="row" v-if="order.qwsd">
							<text class="label">期望送达：</text>
							<text class="value">{{order.qwsd}}</text>
						</view>
						<view class="row" v-if="order.remark">
							<text class="label">备注信息：</text>
							<text class="value">{{order.remark}}</text>
						</view>
					</view>
				</view>

				<view v-if="order.state == 3">
					<text style="color:#3c91ff;margin:20px;">订单已完成，相关信息已隐藏</text>
					<view class="flexRight">
						<button class="btn phone" @click="handleShowServerPhone">
							<image src="/static/image/phone.png" class="phone-icon" />
						</button>
					</view>
				</view>
				<view v-else>
					<!-- 取件信息 -->
					<view class="card">
						<view class="address-box">
							<view class="address-item" v-if="order.pickadd">
								<text class="tag start">起</text>
								<text class="location">{{order.pickadd}}</text>
							</view>
							<view class="address-item" v-if="order.address">
								<text class="tag end">终</text>
								<text class="location">{{order.address}}</text>
							</view>
						</view>
					</view>

					<!-- 功能按钮 -->
					<view class="card">
						<view class="button-row">
							<view class="button-row">
								<button class="btn note" @tap="handleShowOrderNote">订单备注</button>
								<button class="btn image" @tap="handleShowImage">图片信息</button>
							</view>
							<button class="btn phone" @click="handleShowServerPhone">
								<image src="/static/image/phone.png" class="phone-icon" />
							</button>
						</view>
					</view>
					<view class="countdown" v-if="order.state == 1 && order.time > 0">
						将于
						<text style="color:red;">
							<van-count-down :time="order.time" format="DD天HH时mm分ss秒" />
						</text>
						后自动退款
					</view>
					<view class="countdown" v-if="order.state==2 && order.time > 0">
						将于
						<text style="color:red;">
							<van-count-down :time="order.time" format="DD天HH时mm分ss秒" />
						</text>
						后自动确认
					</view>
				</view>
			</view>

			<view v-if="order.getuid">
				<!-- 订单信息标题 -->
				<view class="order-info-title">接单人信息</view>
				<view class="neiRong jieDan">
					<view class="jieDan">
						<view class="avatar">
							<image :src="order.getuser?.avatar_text" mode="aspectFit" />
						</view>
						<text class="title">{{order.getuser?.nickname}}</text>
						<text class="time"></text>
					</view>
					<button class="btn phone" @click="handleShowReceiverPhone">
						<image src="/static/image/phone.png" class="phone-icon" />
					</button>
				</view>
			</view>
			<view v-else>
				<!-- 暂无接单人 -->
				<view class="no-receiver-text">暂无接单人</view>
			</view>

			<!-- 订单信息标题 -->
			<view class="order-info-title">订单信息</view>
			<!-- 订单信息内容 -->
			<view class="neiRong">
				<view class="order-info-container">
					<!-- 订单号 -->
					<view class="info-item">
						<text class="label">订单号</text>
						<view class="value-copy">
							<text class="value">{{order.repnum}}</text>
							<button class="copy-btn" @tap="handleCopyOrderNumber">
								<image src="/static/image/xy.png" class="copy-icon" />
							</button>
						</view>
					</view>

					<!-- 支付时间 -->
					<view class="info-item" v-if="order.wxtime">
						<text class="label">支付时间</text>
						<text class="value">{{order.wxtime_text}}</text>
					</view>

					<view v-if="order.gettime">
						<!-- 接单时间 -->
						<view class="info-item">
							<text class="label">接单时间</text>
							<text class="value">{{order.gettime_text}}</text>
						</view>
					</view>

					<view v-if="order.updatetime">
						<!-- 完成时间 -->
						<view class="info-item">
							<text class="label">完成时间</text>
							<text class="value">{{order.updatetime_text}}</text>
						</view>
					</view>

					<!-- 联系管理员 -->
					<view class="info-item">
						<text class="label">联系管理员</text>
						<text class="value contact-admin" @click="handleContactAdmin">联系校区管理员</text>
					</view>
				</view>
			</view>
		</view>
		<view class="detail-footer">
			<view class="btnFather">
				<view style="width:150px" @click="handleHideDetail">
					<button class="btn back" id="ddzx">返回订单列表</button>
				</view>
				<view style="width:100px" v-if="order.state == 1 && order.isEdit !=1 && order.dele==1"
					@click="handleOrderOn(order.id)">
					<button class="btn confirm" id="jd">接单</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps,
		defineEmits
	} from 'vue';

	const props = defineProps({
		order: {
			type: Object,
			required: true
		},
		adminInfo: {
			type: Object,
			default: () => ({})
		}
	});

	const emits = defineEmits([
		'hideDetail',
		'showDialog',
		'orderOn'
	]);

	// 显示订单备注
	const handleShowOrderNote = () => {
		emits('showDialog', {
			type: 1,
			title: "订单需求"
		});
	};

	// 显示图片信息
	const handleShowImage = () => {
		emits('showDialog', {
			type: 2,
			title: "图片信息"
		});
	};

	// 联系校区管理员
	const handleContactAdmin = () => {
		emits('showDialog', {
			type: 3,
			title: "联系校区管理员"
		});
	};

	// 显示发单人电话
	const handleShowServerPhone = () => {
		emits('showDialog', {
			type: 4,
			title: "发单人电话"
		});
	};

	// 显示接单人电话
	const handleShowReceiverPhone = () => {
		emits('showDialog', {
			type: 5,
			title: "接单人电话"
		});
	};

	// 隐藏订单详情
	const handleHideDetail = () => {
		emits('hideDetail');
	};

	// 接单
	const handleOrderOn = (orderId) => {
		emits('orderOn', orderId);
	};

	// 复制订单号
	const handleCopyOrderNumber = () => {
		const repnum = props.order.repnum;
		uni.setClipboardData({
			data: repnum,
			success: () => uni.showToast({
				title: '订单号已复制!',
				icon: 'none'
			})
		});
	};
</script>

<style scoped>
	/* 订单详情模态框样式 */
	.detail-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: flex-start;
		z-index: 1000;
		padding-top: 240rpx;
		box-sizing: border-box;
	}

	.detail-content {
		width: 90%;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
	}

	.detail-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding: 20rpx 0;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 100;
	}

	.flexRight {
		display: flex;
		justify-content: flex-end;
		padding: 10px;
	}

	.jieDan {
		display: flex;
		justify-content: space-between;
		padding: 5px;
		height: 50px;
	}

	.btnFather {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 暂无接单人 */
	.no-receiver-text {
		font-size: 32rpx;
		color: #333;
		text-align: center;
		margin: 30rpx 0;
	}

	/* 订单信息标题 */
	.order-info-title {
		font-size: 32rpx;
		font-weight: bold;
		margin: 15px;
	}

	/* 订单信息容器 */
	.order-info-container {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 40rpx;
	}

	/* 信息项 */
	.info-item {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.label {
		font-size: 28rpx;
		color: #666;
	}

	.value {
		font-size: 28rpx;
		color: #333;
	}

	.value-copy {
		display: flex;
		align-items: center;
	}

	.copy-btn {
		padding: 0;
		margin-left: 10rpx;
		height: 14px;
		width: 14px;
		border: 0px;
		border-radius: 0px;
	}

	.copy-icon {
		width: 100%;
		height: 100%;
		align-content: center;
		display: flex;
	}

	.contact-admin {
		color: #007aff;
	}

	/* 底部按钮 */
	.footer .btn {
		flex: 1;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		border-radius: 8rpx;
		text-align: center;
	}

	.footer .back {
		background: #fff;
		border: 1rpx solid #2bafffd4;
		color: #2bafffd4;
		border-radius: 25px;
		margin-right: 20rpx;
		font-size: 30rpx;
	}

	.neiRong {
		background-color: #fff;
		border-radius: 10px;
		margin: 10px;
		box-shadow: 0px -1px 2px 2px #eee;
	}

	.container {
		padding-bottom: 140rpx;
	}

	.header {
		padding: 24rpx 11rpx;
		position: relative;
		margin: 10px;
		border-radius: 6px;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 20rpx;
		float: left;
	}

	.avatar image {
		width: 100%;
		height: 100%;
	}

	.title {
		font-size: 30rpx;
		font-weight: 500;
		display: block;
	}

	.time {
		font-size: 24rpx;
		color: #999;
	}

	.status {
		position: absolute;
		right: 28rpx;
		top: 32rpx;
		background: #e1f3e8;
		color: #07c160;
		padding: 8rpx 16rpx;
		font-size: 24rpx;
	}

	.status2 {
		position: absolute;
		right: 28rpx;
		top: 32rpx;
		background: #e9f7ff;
		color: #39a0ef;
		padding: 8rpx 16rpx;
		font-size: 24rpx;
	}

	.status3 {
		position: absolute;
		right: 28rpx;
		top: 32rpx;
		background: #fff3ea;
		color: #f8ca12;
		padding: 8rpx 16rpx;
		font-size: 24rpx;
	}

	.card {
		border-radius: 12rpx;
		padding: 0 28rpx;
	}

	.card-title {
		font-size: 32rpx;
		padding: 28rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.row {
		display: flex;
		justify-content: start;
		font-size: 28rpx;
		line-height: 48rpx;
	}

	.label {
		font-weight: bold;
		display: inline-block;
	}

	.value {
		word-break: break-all;
		display: inline;
	}

	.address-box {
		padding: 28rpx 0;
	}

	.address-item {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.tag {
		width: 44rpx;
		height: 44rpx;
		border-radius: 50px;
		text-align: center;
		line-height: 44rpx;
		margin-right: 20rpx;
		padding: 2px;
	}

	.start {
		background: #07c160;
		color: #fff;
	}

	.end {
		background: #1989fa;
		color: #fff;
	}

	.location {
		font-size: 28rpx;
	}

	.button-row {
		display: flex;
		justify-content: space-between;
		height: 62px;
	}

	.btn {
		border-radius: 8rp;
		height: 32px;
		margin: 5px;
		line-height: 32px;
		font-size: 11px;
	}

	.note {
		background-color: #e6f7ff;
		color: #1890ff;
	}

	.image {
		background-color: #fffbe6;
		color: #faad14;
	}

	.phone {
		background-color: #e6f7ff;
		border-radius: 50%;
		width: 77rpx;
		height: 77rpx;
		margin: 0 20rpx;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.phone-icon {
		width: 100%;
		height: 100%;
	}

	.status-bar {
		margin: 20rpx;
		text-align: center;
	}

	.countdown {
		display: block;
		font-size: 26rpx;
		padding: 24rpx;
		border-radius: 8rpx;
	}

	.no-receiver {
		display: block;
		font-size: 26rpx;
		color: #999;
		margin-top: 20rpx;
	}

	.info-box {
		padding: 28rpx 0;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		line-height: 48rpx;
		color: #666;
	}

	.info-row text:last-child {
		color: #333;
	}

	.contact-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 28rpx 0 0;
		margin-top: 28rpx;
		border-top: 1rpx solid #eee;
		color: #007aff;
	}

	.footer {
		font-size: 30rpx;
		position: fixed;
		bottom: 10px;
		width: 100%;
		right: 10px;
		display: flex;
		background-color: #fff;
		justify-content: flex-end;
		padding: 20px 0;
	}

	.footer .back {
		background: #fff;
		border: 1rpx solid #2bafffd4;
		color: #2bafffd4;
		border-radius: 25px;
		margin-right: 20rpx;
	}

	.footer .confirm {
		background: #3c91ff;
		color: #fff;
		border: none;
	}
</style>